
//flex布局
@mixin mix-flex($dr:row, $jc:center, $ai:center, $fw:nowrap, $ac:normal) {
  display: flex;
  flex-direction: $dr;
  justify-content: $jc;
  align-items: $ai;
  align-content: $ac;
  flex-wrap: $fw;
  box-sizing: border-box;
}

@mixin _flex() {
  .flex {
    @include mix-flex()
  }
  .flex-col {
    @include mix-flex($dr: column)
  }
  .flex-col-t {
    @include mix-flex($dr: column, $jc: flex-start)
  }
  .flex-t {
    @include mix-flex($ai: flex-start)
  }
  .flex-l {
    @include mix-flex($jc: flex-start)
  }
  .flex-r {
    @include mix-flex($jc: flex-end)
  }
  .flex-bet {
    @include mix-flex($jc: space-between)
  }
  //-----------------------------------------
  .flex-1 {
    flex: 1;
  }
  .flex-wrap {
    flex-wrap: wrap;
  }
  .flex-v-dir {
    flex-direction: column
  }
  .flex-h-dir {
    flex-direction: row
  }
  .flexbox {
    display: flex
  }
  .flexbox-v {
    display: flex;
    flex-direction: column
  }
  .flex-vhcenter,
  .flex-hvcenter {
    align-items: center;
    justify-content: center;
  }
  .flex-vstart {
    align-items: flex-start;
  }
  .flex-vcenter {
    align-items: center;
  }
  .flex-hcenter {
    justify-content: center;
  }
  .flex-hbetween {
    justify-content: space-between;
  }
  .flex-haround {
    justify-content: space-around;
  }
  .flex-hend {
    justify-content: flex-end;
  }
  .align-self-end {
    align-self: flex-end;
  }
}

@mixin font-size($v:10px) {
  .bold {
    font-weight: bold;
  }
  .fnormal {
    font-weight: normal;
  }
  /*字体处理*/
  @for $i from 10 through 50 {
    .f#{$i} {
      font-size: 0px + $i
    }
  }
}

@mixin txt() {
  .text-r {
    text-align: right
  }
  .text-l {
    text-align: left
  }
  .text-c {
    text-align: center
  }
  .text-m {
    vertical-align: middle
  }
}

@mixin border_radius_v($v:0) {
  .bor-ra#{$v} {
    border-radius: $v + 0px
  }
  $t: $v+0px;
  .bor-ra#{$v}-l {
    border-radius: 0 0 0 $t
  }
  .bor-ra#{$v}-r {
    border-radius: 0 $t 0 0
  }
  .bor-ra#{$v}-b {
    border-radius: 0 0 $t 0
  }
  .bor-ra#{$v}-t {
    border-radius: $t 0 0 0
  }
}

@mixin p($v, $n:0) {
  /*padding 处理*/
  @if $v=='t' {
    padding-top: $n;
  } @else if $v=='r' {
    padding-right: $n;
  } @else if $v=='b' {
    padding-bottom: $n;
  } @else if $v=='l' {
    padding-left: $n;
  } @else if $v=='tb' {
    padding-top: $n;
    padding-bottom: $n;
  } @else if $v=='lr' {
    padding-left: $n;
    padding-right: $n;
  } @else {
    padding: $v;
  }
}

@mixin m($v, $n:0) {
  /*margin处理*/
  @if $v=='t' {
    margin-top: $n;
  } @else if $v=='r' {
    margin-right: $n;
  } @else if $v=='b' {
    margin-bottom: $n;
  } @else if $v=='l' {
    margin-left: $n;
  } @else if $v=='lr' {
    margin-left: $n;
    margin-right: $n;
  } @else if $v=='tb' {
    margin-top: $n;
    margin-bottom: $n;
  } @else {
    margin: $v;
  }
}

@mixin gap($v, $n:0) {
  .p#{$v} {
    @include p($n)
  }
  .pt#{$v} {
    @include p('t', $n)
  }
  .pr#{$v} {
    @include p('r', $n)
  }
  .pb#{$v} {
    @include p('b', $n)
  }
  .pl#{$v} {
    @include p('l', $n)
  }
  .plr#{$v} {
    @include p('lr', $n)
  }
  .ptb#{$v} {
    @include p('tb', $n)
  }
  .m#{$v} {
    @include m($n)
  }
  .mt#{$v} {
    @include m('t', $n)
  }
  .mr#{$v} {
    @include m('r', $n)
  }
  .mb#{$v} {
    @include m('b', $n)
  }
  .ml#{$v} {
    @include m('l', $n)
  }
  .mlr#{$v} {
    @include m('lr', $n)
  }
  .mtb#{$v} {
    @include m('tb', $n)
  }
}

// 多行文本溢出
@mixin text-overflow($val) {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: $val;
  -webkit-box-orient: vertical;
}

@mixin word-line($val) {
  .word-line#{$val} {
    @include text-overflow($val)
  }
}

@mixin fw() {
  .fw-bold {
    font-weight: bold;
  }
  @for $i from 1 through 5 {
    .fw#{$i} {
      font-weight: 100 * $i
    }
  }
}

@mixin wp() {
  @for $i from 1 through 100 {
    .wp#{$i} {
      width: $i + 0%
    }
  }
}

@mixin clearfix {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

@mixin scrollBar {
  &::-webkit-scrollbar-track-piece {
    background: #d3dce6;
  }

  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-thumb {
    background: #99a9bf;
    border-radius: 20px;
  }
}

@mixin relative {
  position: relative;
  width: 100%;
  height: 100%;
}

